<template>
  <div class="right-box" v-if="queansVisible">
  
    <h2 class="wenda-tit">
      进入问答主页
      <el-icon class="wenda-icon">
        <DArrowRight />
      </el-icon>
    </h2>
    <div class="right-main">
      <div class="mian-input" style="display: flex; flex-wrap: nowrap">
        <el-input
          v-model="input3"
          style="max-width: 600px"
          placeholder="请输入您的问题"
          class="input-with-select"
        >
          <template #append>
            <el-button :icon="Search" />
          </template>
        </el-input>
        <el-button type="success" style="margin-left: 8px">提问</el-button>
      </div>
      <div class="mian">
        <el-tabs
          v-model="activeName"
          class="demo-tabs"
          @tab-click="handleClick"
        >
          <el-tab-pane label="本节问答" name="first">
            <ul class="mian-list" >
              <li class="mian-list-item">
                <div class="list-top">
                  <div class="item-left">
                    <el-avatar
                      class="ava"
                      shape="circle"
                      :size="40"
                      src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"
                    />
                  </div>
                  <div class="item-right">
                    <h3>老师报这个警告啥原因啊？怎么改？</h3>
                    <p style="display: inline-block">
                      你好 这是 i18n 的导入问题，可以看下这个问答：
                      https://github.com/intlify/vue-i18n-next/issues/789
                    </p>
                  </div>
                </div>
                <!-- 问答底部小图标 -->
                <div class="list-bottom">
                  <div class="list-bottom-left">
                    <span class="viewnum"
                      ><el-icon
                        class="icon"
                        style="
                          display: inline-block;
                          position: relative;
                          top: 1px;
                        "
                      >
                        <View />
                      </el-icon>
                      10
                    </span>
                    <span
                      ><el-icon class="icon">
                        <Star />
                      </el-icon>
                      5</span
                    >
                    <span>
                      <el-icon class="icon">
                        <ChatDotSquare />
                      </el-icon>
                      2
                    </span>
                  </div>
                  <div class="list-bottom-right" style="font-size: 13px">
                    2024-08-13 21:48:05
                  </div>
                </div>
              </li>
              <li class="mian-list-item">
                <div class="list-top">
                  <div class="item-left">
                    <el-avatar
                      class="ava"
                      shape="circle"
                      :size="40"
                      src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"
                    />
                  </div>
                  <div class="item-right">
                    <h3>老师报这个警告啥原因啊？怎么改？</h3>
                    <p style="display: inline-block">
                      你好 这是 i18n 的导入问题，可以看下这个问答：
                      https://github.com/intlify/vue-i18n-next/issues/789
                    </p>
                  </div>
                </div>
                <!-- 问答底部小图标 -->
                <div class="list-bottom">
                  <div class="list-bottom-left">
                    <span class="viewnum"
                      ><el-icon
                        class="icon"
                        style="
                          display: inline-block;
                          position: relative;
                          top: 1px;
                        "
                      >
                        <View />
                      </el-icon>
                      10
                    </span>
                    <span
                      ><el-icon class="icon">
                        <Star />
                      </el-icon>
                      5</span
                    >
                    <span>
                      <el-icon class="icon">
                        <ChatDotSquare />
                      </el-icon>
                      2
                    </span>
                  </div>
                  <div class="list-bottom-right" style="font-size: 13px">
                    2024-08-13 21:48:05
                  </div>
                </div>
              </li>
            </ul>
          </el-tab-pane>
          <el-tab-pane label="全部问答" name="second">Config</el-tab-pane>
          <el-tab-pane label="我的问答" name="third">Role</el-tab-pane>
        </el-tabs>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";
import { Search } from "@element-plus/icons-vue";
import type { TabsPaneContext } from "element-plus";

const activeName = ref("first");

defineProps(["queansVisible"]);

let input3 = ref("");

//控制问答区显示变量，默认显示
//const queansVisible = ref(true);
//初始化方法
// const showAndInit = () => {
//   queansVisible.value = !queansVisible.value;
// };

const handleClick = (tab: TabsPaneContext, event: Event) => {
  console.log(tab, event);
};

// defineExpose({
//   showAndInit,
// });
</script>

<style lang="less" scoped>
.right {
  .right-box {
    height: 100%;
    display: flex;
    flex-direction: column;
   overflow: hidden;
    h2.wenda-tit {
      height: 50px;
      line-height: 50px;
      font-size: 14px;
      font-weight: 700;
      padding: 0 20px;
      color: #1c1f21;

      .wenda-icon {
        position: relative;
        top: 2px;
      }
    }
    .right-main {
      height: 100%;
      padding: 0 30px 0 20px;
      .mian-input {
        padding: 16px 0;
      }

      .mian {
        height: 100%;
        .mian-list {
          margin-top: -8px;
          .mian-list-item {
            padding: 16px 0;
            border-bottom: 1px solid #1a1c1f21;
            .list-top {
              display: flex;
              flex-wrap: nowrap;
              .item-left {
                .ava {
                  position: relative;
                  top: -5px;
                }
              }

              .item-right {
                margin-left: 10px;

                h3 {
                  max-height: 48px;
                  line-height: 24px;
                  font-size: 16px;
                  color: #1c1f21;
                  font-weight: 600;
                  text-overflow: -o-ellipsis-lastline;
                  overflow: hidden;
                  text-overflow: ellipsis;
                  display: -webkit-box;
                  line-clamp: 2;
                  box-orient: vertical;
                }

                p {
                  margin-top: 6px;
                  line-height: 22px;
                  max-height: 44px;
                  font-size: 14px;
                  color: #383d42;
                  word-break: break-all;
                  overflow: hidden;
                  text-overflow: ellipsis;
                  display: -webkit-box;
                  line-clamp: 2;
                  box-orient: vertical;
                }
              }
            }

            .list-bottom {
              margin-top: 10px;
              padding-left: 48px;
              box-sizing: border-box;
              padding-bottom: 5px;
              display: flex;
              flex-direction: row;
              justify-content: space-between;
              align-items: center;
              font-size: 15px;
              color: #9199a1;

              .list-bottom-left {
                display: flex;
                flex-direction: row;

                span {
                  margin-right: 20px;
                  .icon {
                    position: relative;
                    top: 1px;
                  }
                }
              }
            }
          }
        }
      }
    }
  }
}
</style>
